<!-- 首页动态组件 -->
<template>
  <!-- 加载组件 -->
  <van-loading type="spinner" v-if="!isShow" vertical size="30px" color="#969799" style="margin-top: 10vh;">加载中...
  </van-loading>

  <!-- 动态内容 -->
  <div class="home-dyn-container" v-if="isShow">
    <van-pull-refresh v-model="pullLoading" success-text="刷新成功~" @refresh="onRefresh">
      <ScrollYdiv :friendAvatar="friendAvatar"></ScrollYdiv>
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <community-item v-for="itemInfo in dynInfo" :comItemInfo="itemInfo"></community-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import CommunityItem from '../../../components/communityItem/communityItem.vue';
import ScrollYdiv from '../../../components/scrollYdiv/scrollYdiv.vue';

import { onMounted, reactive, ref } from 'vue';

import { getFriendAvatar, getDynamicList, getNdynamicList } from '../../../network/home';

let isShow = ref(false)
// 动态顶部好友数据
const friendAvatar = reactive([])
// 动态列表数据
const dynInfo = reactive([])
onMounted(async () => {
  // 获取顶部好友数据
  getFriendAvatar().then(res => {
    friendAvatar.push(...res.data)
  })
  // 获取首页动态列表 
  getDynamicList().then(res => {
    dynInfo.push(...res.data)
    isShow.value = true
  })
})

// 触底加载更多
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 获取首页动态列表 
  setTimeout(() => {
    getDynamicList().then(res => {
      dynInfo.push(...res.data)
      loading.value = false;
    })
  }, 1000)
};

// 下拉刷新
const pullLoading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    // 添加新文章
    getNdynamicList().then(res => {
      // 将最新文章添加到list头部
      dynInfo.unshift(...res.data)
    })
    pullLoading.value = false;
  }, 1000);
}

</script>

<style scoped>
.home-dyn-container {
  margin-top: 45px;
  padding-bottom: 50px;
}
</style>
